<template>
	<div class="wrap">
		<!-- search -->
		<div class="flex" style="margin: 30rpx 0;">
			<div class="flex-left">
				<img class="ss-icon" src="../../static/ss-1.png" alt="">
				<div style="width: 85%;display: flex;">
					<input class="ss-text" placeholder="想住哪儿？" :value="inputClearValue" @input="clearInput"
						@confirm="confirm" confirm-type="search">
					<img class="clear-icon" v-if="showClearIcon" @click="clearIcon" src='../../static/close_filled.png'>
				</div>
			</div>
			<div class="flex-right" @click="reindex()">
				取消
			</div>
		</div>
		<!-- 筛选条件 -->
		<!-- <div class="grid">
			<div class="grid-h">
				通勤找房
			</div>
			<div class="grid-text">
				<div style="padding-right: 5rpx;">设置公司地址和通勤方式，找房更方便 </div>
				<img class="most" src="../../static/arrow_right.png" alt="">
			</div>
		</div>
	 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showClearIcon: false,
				inputClearValue: '',
			}
		},
		methods: {
			confirm(e) {
				uni.navigateTo({
					url: '/pages/home/search-detail?value=' + this.inputClearValue
				});
			},

			clearInput: function(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			reindex() {
				uni.navigateTo({
					url: '/pages/home/index?value=' + this.inputClearValue
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		height: 100vh;
		background-color: #f9f9f9;
		box-sizing: border-box;
	}

	.wrap {
		width: 700rpx;
		height: 100vh;
		margin: 0 auto;

		.flex {
			max-width: 100%;
			@include flex;

			.flex-left {
				@include flex;
				width: 80%;
				height: 50rpx;
				padding: 15rpx;
				border-radius: 15rpx;
				border: 1rpx solid #ccc;
			}

			.flex-right {
				width: 15%;
				text-align: center;
				height: 50rpx;
				padding: 20rpx 0 20rpx 20rpx;
				font-weight: bold;
			}

			.ss-icon {
				width: 50rpx;
				height: 50rpx;
				padding: 0 15rpx 0 8rpx;
			}

			.clear-icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 5rpx;
				margin-left: 16rpx
			}

			.ss-text {
				margin-top: 2rpx;
				font-size: 32rpx;
				width: 85%;
			}
		}

		.orange {
			color: $orange;
		}
	}

	.grid {
		width: 100%;
		// height: 150rpx;
		position: relative;
		border-radius: 15rpx;
		background-color: #9c5b76;

		.grid-h {
			font-size: 32rpx;
			font-weight: bold;
			padding: 30rpx 0 10rpx 20rpx;
		}

		.grid-text {
			display: flex;
			font-size: 26rpx;
			padding: 0 0 30rpx 20rpx;
			color: #ccc;
		}

		.most {
			width: 32rpx;
			height: 32rpx;
			margin-top: 5rpx;
		}
	}
</style>